<template>
	<view class="list-page">
		<u-navbar title="订单列表" :placeholder="true" bgColor="rgba(0,0,0,0.0)" :autoBack="true">
		</u-navbar>
		<view class="tabs">
			<u-tabs :list="list" @click="click" :itemStyle="itemStyle"
				lineColor="linear-gradient( 90deg, #5755F2 0%, #D83EFF 100%)" lineWidth="30"
				:activeStyle="activeStyle"></u-tabs>
		</view>
		<view class="store">
			<view class="store-item" v-for="(item,index) in shoplist" :key="index">
				<view class="store-title">
					<view class="orderid">订单号：{{item.orderid}}</view>
					<view class="pay-type" v-if="item.status == 'created'">待支付</view>
					<view class="pay-type1" v-if="item.status == 'paid' && item.use_status == 0">待核销</view>
					<view class="pay-type2" v-if="item.status == 'paid' && item.use_status == 1">已核销</view>
					<view class="pay-type2" v-if="item.status == 'cancelled'">已取消</view>
				</view>
				<view class="store-info">
					<view class="info-left">
						<image v-if="item.product.images" :src="'https://m.lqvvvv.com'+item.product.images" mode="">
						</image>
						<view class="info-msg">
							<view class="goods">
								名称：{{item.product.name}}
							</view>
							<view class="info-text">
								下单时间：{{$u.timeFormat(item.paytime, 'yyyy-mm-dd hh:MM:ss')}}
							</view>
							<view class="price">
								￥{{item.price}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="loadmorestatus" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '全部',
				}, {
					name: '待支付',
				}, {
					name: '待核销'
				}, {
					name: '已核销'
				}, {
					name: '已取消'
				}],
				itemStyle: {
					backgroundColor: 'rgba(0,0,0,0.0)',
					width: "20%",
					height: '100rpx',
				},
				activeStyle: {
					fontSize: '32rpx',
					color: '#2D2D2D',
					fontWeight: 'bold'
				},
				page: 1,
				order_status: 0,
				shoplist: [],
				loadmorestatus: 'loadmore',
			}
		},
		onShow() {
			this.page = 1
			this.postlist()
		},
		onReachBottom() {
			this.page = this.page + 1
			this.loadmorestatus = 'loading';
			this.postlist()
		},
		methods: {
			postlist() {
				let params = {
					order_status: this.order_status,
					page: this.page,
					limit: 10
				}
				this.$Request({
					method: 'POST',
					url: '/api/shop_order/getMyShopOrderList',
					data: params,
					ismsg: false,
				}).then(res => {
					console.log(res)
					if (res.code == 1) {
						if (res.data.data.length < 10) {
							this.loadmorestatus = 'nomore';
						}
						if (this.page == 1) {
							this.shoplist = res.data.data
						} else {
							this.shoplist = [...res.data.data, ...this.shoplist]
						}
					}
				})
			},
			click(item) {
				this.order_status = item.index
				this.postlist()
			},
		}
	}
</script>


<style lang="scss" scoped>
	.list-page {
		min-height: 100vh;
		background-image: url('https://m.lqvvvv.com/assets/static/index/nav-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 900rpx;
		background-color: #F7F8FC;
	}

	.store {
		padding: 0 30rpx 30rpx;

		.store-item {
			margin-top: 30rpx;
			padding: 20rpx 30rpx 40rpx 30rpx;
			background-color: #fff;
			border-radius: 20rpx;

			.store-title {
				display: flex;
				align-items: center;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #D9D9D9;
				justify-content: space-between;

				.orderid {
					font-size: 24rpx;
					color: #8B8DA0;
					font-weight: bold;
				}

				.pay-type {
					background: rgba(74, 104, 255, 0.18);
					border-radius: 9rpx;
					border: 2rpx solid #2B84FF;
					font-weight: 500;
					font-size: 24rpx;
					color: #2E69FF;
					padding: 5rpx 10rpx;
				}
				.pay-type1{
					background: rgba(255,167,74,0.18);
					border-radius: 9rpx;
					border: 2rpx solid #FFA72B;
					font-weight: 500;
					font-size: 24rpx;
					color: #FF8F2E;
					padding: 5rpx 10rpx;
				}
				.pay-type2{
					background: rgba(171,171,171,0.18);
					border-radius: 9rpx;
					border: 2rpx solid #BFBFBF;
					font-weight: 500;
					font-size: 24rpx;
					color: #B1B1B1;
					padding: 5rpx 10rpx;
				}
			}

			.store-info {
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;

				.info-left {
					display: flex;

					image {
						width: 140rpx;
						height: 140rpx;
						border-radius: 20rpx;
					}

					.info-msg {
						font-size: 24rpx;
						margin-left: 20rpx;

						.goods {
							margin-bottom: 10rpx;
							color: #2D2D2D;
							font-size: 28rpx;
							font-weight: bold;
						}

						.info-text {
							margin-top: 20rpx;
							color: #9E9BA4;
							white-space: nowrap;
							/* 不换行 */
							overflow: hidden;
							/* 隐藏超出的内容 */
							text-overflow: ellipsis;
							/* 用省略号表示被隐藏的部分 */
						}

						.price {
							margin-top: 20rpx;
							font-weight: 600;
							font-size: 28rpx;
							color: #FF2529;
						}

					}
				}

			}

		}
	}
</style>